<template>
    <div class="popW">
        <div class="popW-c">
            <div class="popW-code-div popW-c-div">
                <slot></slot>
            </div>
            <img v-if="isShowClose" class="close-btn" src="/img/home/icon_close_btn@2x.png" alt="" @click="closePopW">
        </div>
      </div>
</template>

<script type="text/ecmascript-6">
    
    export default {
        name:'message-popup',
        data() {
            return {
                
            }
        },
        props: ['isShowClose'],
        created() {
            
        },
        mounted() {
            
        },
        methods:{
            closePopW(){
                this.$emit('closePopW')
            }
        }
    }
</script>
<style scoped>
    .popW{
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.4);
        width: 100%;
        height: 100%;
        /* display: none; */
        z-index: 99999;
    }

    .popW .popW-c{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 68%;
        height: 56%;
    }

    .popW .popW-c .popW-c-div{
        background: #fff;
        border-radius: .4rem;
        padding: 30px 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .popW .popW-c .close-btn{
        display: block;
        height: 2.8rem;
        width: 2.8rem;
        margin: 2rem auto;
    }
    
    @media (max-width:320px){
        .popW .popW-c {
            top: 45%;
        }
        
        .btn-div{
            padding: 15px 15px;
        }
        
        .popW .popW-c .popW-c-div{
            padding: 20px 12px;
        }
    }

    @media screen and (min-width: 321px) and (max-width:360px){
     
    }
    
</style>
